<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas基础</title>
    <style>
        canvas {
            background-color: rgb(225, 227, 228);
        }
    </style>
</head>

<body>
    <canvas id="tutorial" width="600" height="600"></canvas>

    <script>
        var canvas = document.getElementById('tutorial');
        //获得 2d 上下文对象
        var ctx = canvas.getContext('2d');

        // 绘制线段
        const drawPath = () => {

            ctx.beginPath()
            ctx.moveTo(1, 10)
            ctx.lineTo(300, 10);
            // 设定线的颜色
            // 语法: 工具箱.strokeStyle = '颜色'
            ctx.strokeStyle = 'red'
            // 2-3. 设定本条线的样式
            // 设定线的宽度
            // 语法: 工具箱.lineWidth = 数字
            ctx.lineWidth = 2
            ctx.stroke();
            // 3. 结束之前的绘制内容
            // 语法: 工具箱.beginPath()
            ctx.beginPath()


            ctx.moveTo(1, 100)
            ctx.lineTo(300, 100);
            ctx.lineWidth = 2
            ctx.strokeStyle = '#000'
            ctx.stroke();
            ctx.beginPath()
        }
        // 绘制矩形
        const drawFileRect = () => {
            ctx.fillRect(1, 1, 50, 50); // 绘制矩形，填充的默认颜色为黑色。
            ctx.strokeRect(1, 1, 50, 50);   // 绘制矩形边框
            // ctx.clearRect(1, 1, 50, 50); // 清除指定矩形区域
            // 问题：ctx.clearRect 和 清空整个画布的区别？
        }

        // 绘制三角型
        const drawTriangles = (obj) => {
            ctx.moveTo(obj.initpoint.x, obj.initpoint.y)
            ctx.lineTo(obj.point.x, obj.point.y)
            // 默认拐点
            // ctx.lineJoin = 'miter'
            // 圆角拐点
            ctx.lineJoin = 'round'
            ctx.stroke()
            ctx.beginPath()
        }

        // drawPath()
        // drawFileRect()
        drawTriangles({ initpoint: { x: 10, y: 20 }, point: { x: 40, y: 40 } })
        drawTriangles({ initpoint: { x: 10, y: 60 }, point: { x: 40, y: 40 } })

    </script>
</body>

</html>